<template>
    <div>
        <el-page-header @back='router.back()' content='角色权限'></el-page-header>
        <div class="wrapper f-s">
            <div class="left">
                <o-tips >
                    <o-tree code='allMenus' 
                        v-model='permissions' 
                        @change='e => webData = e.webData'
                        :default-checked-keys='webData'></o-tree>
                    <el-button type='primary' @click='confirm' style="margin-top:10px;">保存</el-button>
                </o-tips>
                
            </div>
            <div class="right">
                <o-tips type='danger'>
                    <p>1、角色权限与菜单列表一一对应，如果希望某个角色可以查看某个菜单，只要为改角色勾选改订单权限即可。</p>
                    <p>2、如果将角色分配给某个账号后，请谨慎调整权限，否则将影响所有使用该角色权限的所有账号。</p>
                    <p>3、删除角色也将影响所有使用该角色的账号，请谨慎操作。</p>
                </o-tips>
            </div>
        </div>
    </div>
</template>

<script>
    import {toast} from '@u';
    export default {
        data () {
            return {
                permissions : [],
                webData : [],//这里存储一份仅选中的数据，在编辑时使用
            }
        },
        created () {
            let info = JSON.parse(this.$route.query.info);

            let webJson = JSON.parse(info.web_json);
            
            if (webJson?.permissions) {
                this.webData = [...webJson.permissions];
            }
        },
        methods : {
            confirm () {
                if (!this.permissions.length) {
                    toast('请选择要配置的权限', 'error');
                    return;
                }
                this.__api.system.rolesPermission({
                    id : this.$route.params.id,
                    permissions : this.permissions,
                    web_json : JSON.stringify({
                        permissions : this.webData
                    })
                }).then(_ => {
                    toast('操作成功');
                    this.$router.back();
                })
            },
            
        }
    }
</script>

<style lang='less' scoped>
    .wrapper {
        align-items: flex-start;
        .left {
            // margin-top: 10px;
            width: 60%;
            // background: red;
            margin-right: 20px;
        }
        .right {
            flex: 1;
        }
    }
</style>